<template>
	<view class="article-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="back-btn" @click="back">
					<view class="back-arrow-icon"></view>
				</view>
				<view class="navbar-title">我的游记</view>
				<view class="navbar-right"></view>
			</view>
		</view>
		
		<!-- 游记列表 -->
		<view class="list-section">
			<view v-if="loading" class="loading-section">
				<u-loading-icon mode="spinner"></u-loading-icon>
				<text class="loading-text">加载中...</text>
			</view>
			
			<view v-else-if="articleList.length === 0" class="empty-section">
				<u-empty mode="data" text="暂无游记"></u-empty>
			</view>
			
			<view v-else class="article-list">
				<view class="article-item" v-for="(item, index) in articleList" :key="item.articleId || index" @click="goToDetail(item)">
					<view class="article-image-wrapper">
						<image class="article-image" :src="getImageUrl(item)" mode="aspectFill"></image>
						<view class="top-badge" v-if="item.isTop">置顶</view>
					</view>
					<view class="article-content">
						<view class="article-title">{{ item.title || '无标题' }}</view>
						<view class="article-info">
							<view class="info-item">
								<u-icon name="eye" size="28" color="#999"></u-icon>
								<text class="info-text">{{ formatCount(item.viewCount) }}</text>
							</view>
							<view class="info-item">
								<u-icon name="heart" size="28" color="#999"></u-icon>
								<text class="info-text">{{ formatCount(item.likeCount) }}</text>
							</view>
							<view class="info-item">
								<u-icon name="chat" size="28" color="#999"></u-icon>
								<text class="info-text">{{ formatCount(item.commentCount) }}</text>
							</view>
						</view>
						<view class="article-meta">
							<text class="meta-location" v-if="item.location">{{ item.location }}</text>
							<text class="meta-time">{{ formatTime(item.createTime) }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 到底了提示 -->
			<view class="list-end-tip" v-if="articleList.length > 0">
				<view class="end-line"></view>
				<text class="end-text">到底了哦</text>
				<view class="end-line"></view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import $api from '../../api/user.js';

export default {
	data() {
		return {
			statusBarHeight: 0,
			loading: false,
			articleList: [],
			userId: null
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		
		// 获取用户ID
		const user = uni.getStorageSync('user');
		if (user && user.id) {
			this.userId = user.id;
			this.loadArticleList();
		} else {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}, 1500);
		}
	},
	methods: {
		// 返回
		back() {
			uni.switchTab({
				url: '/pages/user/user'
			});
		},
		
		// 加载游记列表
		loadArticleList() {
			if (!this.userId) {
				return;
			}
			
			this.loading = true;
			$api.getArticleList({
				userId: this.userId,
				status: 1 // 只获取已发布的游记
			}).then(res => {
				this.loading = false;
				if (res.data && res.data.code === 200) {
					this.articleList = res.data.data || [];
				} else {
					uni.showToast({
						title: res.data.message || '加载失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				this.loading = false;
				console.error('加载游记列表失败', err);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			});
		},
		
		// 获取图片URL
		getImageUrl(item) {
			if (item.coverImage) {
				return item.coverImage;
			}
			if (item.images) {
				try {
					const images = JSON.parse(item.images);
					if (Array.isArray(images) && images.length > 0) {
						return images[0];
					}
				} catch (e) {
					console.error('解析图片列表失败', e);
				}
			}
			return '/static/image/user/avatar.jpg';
		},
		
		// 格式化数量
		formatCount(count) {
			if (!count) return '0';
			if (count < 1000) {
				return count.toString();
			} else if (count < 10000) {
				return (count / 1000).toFixed(1) + 'k';
			} else {
				return (count / 10000).toFixed(1) + 'w';
			}
		},
		
		// 格式化时间
		formatTime(timeStr) {
			if (!timeStr) return '';
			try {
				const date = new Date(timeStr);
				const now = new Date();
				const diff = now - date;
				const minutes = Math.floor(diff / 60000);
				const hours = Math.floor(diff / 3600000);
				const days = Math.floor(diff / 86400000);
				
				if (minutes < 1) {
					return '刚刚';
				} else if (minutes < 60) {
					return minutes + '分钟前';
				} else if (hours < 24) {
					return hours + '小时前';
				} else if (days < 7) {
					return days + '天前';
				} else {
					const month = date.getMonth() + 1;
					const day = date.getDate();
					return `${month}-${day}`;
				}
			} catch (e) {
				return '';
			}
		},
		
		// 跳转到详情
		goToDetail(item) {
			// TODO: 跳转到游记详情页
			uni.showToast({
				title: '游记详情功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.article-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.custom-navbar {
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		
		.back-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-arrow-icon {
				width: 0;
				height: 0;
				border-top: 12rpx solid transparent;
				border-bottom: 12rpx solid transparent;
				border-right: 20rpx solid #909399;
				transform: rotate(0deg);
			}
		}
		
		.navbar-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		
		.navbar-right {
			width: 60rpx;
		}
	}
}

.list-section {
	padding: 20rpx;
}

.loading-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	
	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}
}

.empty-section {
	padding: 100rpx 0;
}

.article-list {
	.article-item {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.article-image-wrapper {
			position: relative;
			width: 100%;
			height: 400rpx;
			
			.article-image {
				width: 100%;
				height: 100%;
			}
			
			.top-badge {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				background-color: rgba(255, 149, 0, 0.9);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
			}
		}
		
		.article-content {
			padding: 24rpx;
			
			.article-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.article-info {
				display: flex;
				align-items: center;
				gap: 30rpx;
				margin-bottom: 16rpx;
				
				.info-item {
					display: flex;
					align-items: center;
					gap: 8rpx;
					
					.info-text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.article-meta {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999;
				
				.meta-location {
					flex: 1;
				}
				
				.meta-time {
					margin-left: 20rpx;
				}
			}
		}
	}
}

.list-end-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
	
	.end-line {
		width: 60rpx;
		height: 1rpx;
		background-color: #e5e5e5;
	}
	
	.end-text {
		margin: 0 20rpx;
		font-size: 24rpx;
		color: #999;
	}
}
</style>

